<template>
    <div class="center">
        <div class="center-form">
          <el-form inline label-width="120px" @submit.native.prevent>
            <el-form-item label="商户小程序名称">
              <el-input v-model="listParsem.name" placeholder="请输入商户小程序名称" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label="模板id">
              <el-input v-model="listParsem.template_id" placeholder="请输入模板id" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label=" ">
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="initGetUploadInfo"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" type="primary" @click="resetList"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="center-construct">
            <el-button type="primary" style="margin-right: 10px;" :loading="dataLoading" @click="dataSynchronize">数据同步</el-button>
            <el-button type="primary" style="margin-right: 30px;" @click="constructClick">构建小程序</el-button>
        </div>
        <div class="center-table">
            <el-table
          :data="appTableList"
          tooltip-effect="dark"
          style="width: 100%"
          stripe
          :header-cell-style="tableHeaderColor"
          v-loading="loading"
        >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
            prop="templateVersion"
            label="模板构建版本"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="appVersion"
            label="商户小程序构建版本"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="商户小程序名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="appAuthToken"
            label="授权token"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="templateId"
            label="模板id"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="buildStatus"
            label="状态"
            align="center"
          >
          <template slot-scope="scope">
            <div style="display: flex;align-items: center;justify-content: center;">
              <p>{{ funBuildStatus(scope.row) }}</p>
              <el-popover
              v-if="scope.row.createStatus == 9"
                placement="top-start"
                title="拒绝原因"
                width="200"
                trigger="hover"
                :content="scope.row.rejectReason">
                <i slot="reference" style="margin:-5px 0 0 5px ;" class="el-icon-question" ></i>
              </el-popover>
            </div>
          </template>
        </el-table-column>
          <el-table-column
            prop="createTime"
            label="构建时间"
            width="170"
            align="center"
          ></el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="140"
          >
            <template slot-scope="scope">
                <el-button
                v-if="scope.row.createStatus == 6 || scope.row.createStatus == 9"
                type="text"
                @click="reviewMin(scope.row)"
                >审核</el-button
              >
              <!-- <el-button
                v-if="scope.row.createStatus == 6 || scope.row.createStatus == 9"
                type="text"
                @click="detailVersion(scope.row)"
                >废弃</el-button
              > -->
              <!-- <el-button
                type="text"
                @click="reviewDetail(scope.row)"
                >详情</el-button
              > -->
              <el-button
              v-if="scope.row.createStatus == 8 || scope.row.createStatus == 13 || scope.row.createStatus == 14"
                type="text"
                @click="shelvesMin(scope.row)"
                >上架</el-button
              >
              <el-button
              v-if="scope.row.createStatus == 10"
                type="text"
                @click="offtheMin(scope.row)"
                >下架</el-button
              >
            </template>
          </el-table-column>
        </el-table>
       <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="sizechange"
          :page-size="listParsem.size"
          :current-page.sync="listParsem.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
    </div>
        </div>
        <el-dialog
         title="构建小程序"
         :visible.sync="constructVisible"
         width="500px"
         :before-close="handleClose">
         <div >
            <el-form :model="constructForm" :rules="constructFormRules" ref="ruleForm" label-width="140px" >
                <el-form-item label="小程序模板" prop="template_id">
                  <el-select  v-model="constructForm.template_id"  filterable placeholder="请选择小程序模板" style="width:320px">
                    <el-option
                      v-for="item in templateList"
                      :key="item.value"
                      :label="item.lable"
                      :value="item.value">
                    </el-option>
                  </el-select> 
                  <!-- <el-input v-model="constructForm.template_id" placeholder="请输入小程序模板APPID"></el-input> -->
               </el-form-item>
               <el-form-item label="商户小程序APPID" prop="app_id">
                   <el-input v-model="constructForm.app_id" placeholder="请输入商户小程序APPID"></el-input>
               </el-form-item>
               <el-form-item label="小程序模板版本号">
                   <el-input v-model="constructForm.template_version" placeholder="请输入小程序模板版本号"></el-input>
               </el-form-item>
               <el-form-item label="商户小程序版本号" prop="app_version">
                   <el-input v-model="constructForm.app_version" placeholder="请输入商家小程序版本号"></el-input>
               </el-form-item>
               <el-form-item label="商户小程序名称" prop="name">
                   <el-input v-model="constructForm.name" placeholder="请输入商家小程序名称"></el-input>
               </el-form-item>
            </el-form>
         </div>
         <span slot="footer" class="dialog-footer">
           <el-button @click="constructVisible = false">取 消</el-button>
           <el-button type="primary" :loading="constructLoading" @click="addConstructClick">确 定</el-button>
         </span>
       </el-dialog>

       <el-dialog
         title="审核小程序"
         :visible.sync="reviewVisible"
         :close-on-click-modal="false"
         width="800px"
         v-loading="reviewLoading"
         :before-close="handleClose">
         <div class="construct-dialog"  >
            <el-form :model="reviewForm" :inline="true" :rules="reviewFormRules" ref="reviewForm" label-width="140px" >
                <el-form-item label="小程序版本号" prop="appVersion">
                   <el-input v-model="reviewForm.appVersion" placeholder="请输入小程序版本号"></el-input>
               </el-form-item>
               <el-form-item label="区域类型" prop="regionType">
                <el-radio-group v-model="reviewForm.regionType" >
                  <el-radio :label="item.value" v-for=" item in regionTypeList">{{ item.lable }}</el-radio>
                </el-radio-group>
               </el-form-item>
               <el-form-item label="小程序客服邮箱" prop="serviceEmail">
                   <el-input v-model="reviewForm.serviceEmail" placeholder="请输入小程序客服邮箱"></el-input>
               </el-form-item>
               <el-form-item label="小程序客服电话" prop="servicePhone">
                   <el-input v-model="reviewForm.servicePhone" placeholder="请输入小程序客服电话"></el-input>
               </el-form-item>
              
               <el-form-item label="小程序名称" prop="appName">
                   <el-input v-model="reviewForm.appName"     placeholder="请输入小程序名称"></el-input>
               </el-form-item>
              
               <el-form-item label="省市区信息" prop="serviceRegion">
                <el-cascader
                   v-model="reviewForm.serviceRegion"
                   :options="regionList"
                   :props="{ expandTrigger: 'hover' }"
                   @change="regionChange">
                </el-cascader>
               </el-form-item>
               <el-form-item label="小程序前台类目" prop="miniCategoryIds">
                <el-select v-model="reviewForm.miniCategoryIds" placeholder="请选择">
                  <el-option
                    v-for="item in categoryIdsList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
               </el-form-item>
              
               <el-form-item label="营业执照证件号" prop="licenseNo">
                   <el-input v-model="reviewForm.licenseNo" placeholder="请输入营业执照证件号"></el-input>
               </el-form-item>
               <el-form-item label="营业执照名称" prop="licenseName">
                   <el-input v-model="reviewForm.licenseName" placeholder="请输入营业执照名称"></el-input>
               </el-form-item>
               <el-form-item label="营业执照有效期" prop="licenseValidDate">
                <el-date-picker
                    v-model="reviewForm.licenseValidDate"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    >
                  </el-date-picker>
               </el-form-item>
               <el-form-item label="小程序版本描述" prop="versionDesc">
                   <el-input v-model="reviewForm.versionDesc" style="width: 600px;"  :rows="3"   type="textarea" placeholder="请输入小程序版本描述"></el-input>
               </el-form-item>
               <el-form-item label="小程序描述" prop="appDesc">
                   <el-input v-model="reviewForm.appDesc"  :rows="3"   style="width: 600px;" type="textarea" placeholder="请输入小程序描述"></el-input>
               </el-form-item>
               <el-form-item label="小程序简介" prop="appSlogan">
                   <el-input v-model="reviewForm.appSlogan" :rows="3"  style="width: 600px;" type="textarea"     placeholder="请输入小程序简介"></el-input>
               </el-form-item>
               <!-- <el-form-item label="小程序应用截图" prop="first_screen_shot" style="width: 100%;">
                <el-upload
                :action="uploadUrl"
                :headers="token"
                  list-type="picture-card"
                  :on-remove="applicationHandleRemove"
                  :on-success="applicationUpLoadSuccess"
                  :limit="5"
                  >
                  <i class="el-icon-plus"></i>
                </el-upload>
               </el-form-item> -->

               <el-form-item label="营业执照照片" prop="firstLicensePic" style="width: 100%;">
                <el-upload
                :action="uploadUrl"
                :headers="token"
                  :on-remove="licenseRemove"
                  :on-success="licenseUpLoadSuccess"
                  :show-file-list="false"
                  >
                  <img v-if="reviewForm.firstLicensePic" :src="reviewForm.firstLicensePic" class="avatar">
                  <i v-else class="el-icon-plus"></i>
                </el-upload>
               </el-form-item>
               <el-form-item label="门头照" prop="outDoorPic">
                <el-upload
                :action="uploadUrl"
                :headers="token"
                  :on-preview="handlePictureCardPreview"
                  :show-file-list="false"
                  :on-remove="doorRemove"
                  :on-success="doorUpLoadSuccess"
                  >
                  <img v-if="reviewForm.outDoorPic" :src="reviewForm.outDoorPic" class="avatar">
                  <i v-else class="el-icon-plus"></i>
                </el-upload>
               </el-form-item>
               <el-form-item label="小程序logo图标" prop="appLogo">
                <el-upload
                :action="uploadUrl"
                :headers="token"
                  :show-file-list="false"
                  :on-remove="logoRemove"
                  :on-success="logoUpLoadSuccess"
                  >
                  <img v-if="reviewForm.appLogo" :src="reviewForm.appLogo" class="avatar">
                  <i v-else class="el-icon-plus"></i>
                </el-upload>
               </el-form-item>
               <!-- out_door_pic -->
               <!--  -->
            </el-form>
         </div>
         <span slot="footer" class="dialog-footer">
           <el-button @click="reviewVisible = false">取 消</el-button>
           <el-button type="primary" @click="reviewClick">确 定</el-button>
         </span>
       </el-dialog>
    </div>
</template>
<script>
import { synInfoConstruct , reviewQuery , constructUpload ,getUploadInfo ,getAreaList , reviewApply , upDownOnline , upDownOffline } from '@/api/fetchApi'
// import { arealist ,  } from '@/api/api'
export default{
    data(){
        return{
            uploadUrl: process.env.VUE_APP_BASE_URL + "/product/v31/api/merchant/uploadfile/upload",
            token: { token: sessionStorage.getItem("token") },
            listParsem:{page:1,size:10,template_id:''}, //,name:'伊诺名护肤造型'
            total:0,
            reviewLoading:false,
            appTableList:[],
            loading:false,
            dataLoading:false,
            constructVisible:false,
            applicationFileList:[],
            licenseFileList:[],
            logoFileList:[],
            constructForm:{},
            regionList:[],
            categoryIdsList:[{ label:'美容/美发',value:'XS1007_XS2060_XS3067'},{ label:'瑜伽/舞蹈/健身房',value:'XS1007_XS2559'},{ label:'交通/导航',value:'XS1006_XS2057'}],
            constructFormRules:{
                template_id:[{ required: true, message: '请输入小程序模板APPID', trigger: 'blur' }],
                app_version:[{ required: true, message: '请输入商户小程序版本号', trigger: 'blur' }],
                name:[{ required: true, message: '请输入商户小程序名称', trigger: 'blur' }],
                app_id:[{ required: true, message: '请输入商户小程序APPID', trigger: 'blur' }],
                // app_auth_token:[{ required: true, message: '请输入商家授权token', trigger: 'blur' }]
           },
           reviewVisible:false,
           reviewForm:{},
           reviewFormRules:{
            appVersion:[{ required: true, message: '请输入小程序版本号', trigger: 'blur' }],
            regionType:[{ required: true, message: '请选择区域类型', trigger: 'change' }],
            serviceEmail:[{ required: true, message: '请输入小程序客服邮箱', trigger: 'blur' }],
            servicePhone:[{ required: true, message: '请输入小程序客服电话', trigger: 'blur' }],
            appName:[{ required: true, message: '请输入小程序名称', trigger: 'blur' }],
            serviceRegion:[{ required: true, message: '请选择省市区信息', trigger: 'change' }],
            miniCategoryIds:[{ required: true, message: '请选择小程序前台类目', trigger: 'change' }],
            licenseNo:[{ required: true, message: '请输入营业执照证件号', trigger: 'blur' }],
            licenseName:[{ required: true, message: '请输入营业执照名称', trigger: 'blur' }],
            licenseValidDate:[{ required: true, message: '请选择营业执照有效期', trigger: 'blur' }],
            firstLicensePic:[{required: true, validator:(rule , value , callback)=>{
                    if(this.reviewForm.firstLicensePic){
                        callback();
                    }else{
                        callback(new Error('请上传营业执照！'));
                    }
                 } }],
            first_screen_shot:[{required: true, validator:(rule , value , callback)=>{
                    if(this.reviewForm.first_screen_shot && !this.reviewForm.second_screen_shot){
                      callback(new Error('请上传第二张小程序应用截图！'))
                      // callback();
                    }else if(!this.reviewForm.first_screen_shot){
                        callback(new Error('请上传小程序应用截图！'));
                    }else if(this.reviewForm.first_screen_shot && this.reviewForm.second_screen_shot){
                        callback();
                    }
                 } }],
                 outDoorPic:[{required: true, validator:(rule , value , callback)=>{
                    if(this.reviewForm.outDoorPic){
                        callback();
                    }else{
                        callback(new Error('请上传门头照！'));
                    }
                 } }],
                 appLogo:[{required: true, validator:(rule , value , callback)=>{
                    if(this.reviewForm.appLogo){
                        callback();
                    }else{
                        callback(new Error('请上传小程序logo图标！'));
                    }
                 } }],
            versionDesc:[{ required: true, message: '请输入小程序版本描述', trigger: 'blur' }],
            appDesc:[{ required: true, message: '请输入小程序描述', trigger: 'blur' }],
            appSlogan:[{ required: true, message: '请输入小程序简介', trigger: 'blur' }],
           },
           constructLoading:false,
           regionTypeList:[{lable:'全球',value:'GLOBAL'},{lable:'中国',value:'CHINA'},{lable:'指定区域',value:'LOCATION'}],
           templateList:[{lable:'美业模板1.5',value:'2021004141624085'},{lable:'美业模板3.0',value:'2021004145623277'},{lable:'健身模板3.0',value:'2021004148669701'}]
        }
    },
    mounted(){
      this.initGetUploadInfo()
      this.initArealist()
    },
    methods:{
        async initArealist(){
           const res = await getAreaList()
           this.regionList = res.areaItems
        },
        async initGetUploadInfo(){
          this.loading = true
          const res = await  getUploadInfo(this.listParsem)
          this.total = res.pageInfo.recordCount
          this.appTableList = res.data
          this.loading = false
        },
        async dataSynchronize(){
              this.dataLoading = true
              const res = await synInfoConstruct({page:1,size:100})
              if(res.code == '200'){
                this.dataLoading = false
                this.$message.success('同步成功')
                this.initGetUploadInfo()
              }else{
                this.dataLoading = false
                this.$message.error(res.msg)
              }
        },
        funBuildStatus(v){
          const buildStatusList = [{label:'构建排队中',value:0},{label:'正在构建',value:1},{label:'构建成功',value:2},{label:'构建失败',value:3},{label:'构建超时',value:5},{label:'版本创建成功',value:6},{label:'开发中',value:7},{label:'审核通过',value:8},{label:'审核驳回',value:9},{label:'已上架',value:10},{label:'准入不可营销',value:11},{label:'灰度中',value:12},{label:'已下架',value:13},{label:'已强制下架',value:14},{label:'审核中',value:15}]
          const data =  buildStatusList.find(item=>item.value == v.createStatus)
          return data.label
        },

        // 小程序应用截图已上传的文件时的钩子
        applicationUpLoadSuccess(response){
            this.applicationFileList.push(response.data.filePath)
            this.applicationUpLoadWith()
        },
        // 营业执照照片截图已上传的文件时的钩子
        licenseUpLoadSuccess(response){
          this.reviewForm.firstLicensePic = response.data.filePath
          this.$forceUpdate()
            // this.licenseFileList.push(response.data.filePath)
            // this.licenseUpLoadWith()
        },
        //门头照已上传的文件时的钩子
        doorUpLoadSuccess(response){
            // console.log(response)
            this.reviewForm.outDoorPic = response.data.filePath
            this.$forceUpdate()
        },
        // logo已上传的文件时的钩子
        logoUpLoadSuccess(response){
           this.reviewForm.appLogo = response.data.filePath
           this.$forceUpdate()
        },
       
        // 小程序应用截图删除图片的钩子
        applicationHandleRemove(response, fileList){
            const list = []
            fileList.forEach(item=>{
                list.push(item.response.data.filePath)  
            })
            this.applicationFileList = list
            this.applicationUpLoadWith()
        },
        resetList(){
          this.listParsem = {page:1,size:10}
          this.initGetUploadInfo()
        },
        // 营业执照照片删除图片的钩子
        licenseRemove(response, fileList){
          this.reviewForm.firstLicensePic = ''
            // const list = []
            // fileList.forEach(item=>{
            //     list.push(item.response.data.filePath)  
            // })
            // this.licenseFileList = list
            // this.licenseUpLoadWith()
        },
         // 门头照已经删除图片的钩子
        doorRemove(response, fileList){
            this.reviewForm.outDoorPic = ''
        },
        // logo已经删除图片的钩子
        logoRemove(response, fileList){
            this.reviewForm.appLogo = ''
        },

        // 小程序应用截图 数据处理
        applicationUpLoadWith(){
              this.reviewForm.first_screen_shot  = this.applicationFileList[0]
              this.reviewForm.second_screen_shot  = this.applicationFileList[1]
              this.reviewForm.third_screen_shot  = this.applicationFileList[2]
              this.reviewForm.fourth_screen_shot  = this.applicationFileList[3]
              this.reviewForm.fifth_screen_shot  = this.applicationFileList[4]
              this.$refs.reviewForm.clearValidate()
              this.$forceUpdate()
        },
        // 营业执照照片截图 数据处理
        licenseUpLoadWith(){
            this.reviewForm.firstLicensePic  = this.licenseFileList[0]
              // this.reviewForm.second_license_pic  = this.licenseFileList[1]
              // this.reviewForm.third_license_pic  = this.licenseFileList[2]
              // this.reviewForm.fourth_license_pic  = this.licenseFileList[3]
              // this.reviewForm.fifth_license_pic  = this.licenseFileList[4]
              this.$refs.reviewForm.clearValidate()
              this.$forceUpdate()
        },
         constructClick(){
            this.constructVisible = true
            this.constructForm = {}
            this.$nextTick(()=>{
              this.$refs.ruleForm.clearValidate()
            })
        },
        // 详情
        async reviewDetail(v){
           const res = await reviewQuery({appVersion:v.appVersion,appName:v.name,page:1,size:10})
        },
        // 审核
        async reviewMin(v){
          const res =  await reviewQuery({appVersion:v.appVersion,appName:v.name,page:1,size:10})
           if(res.data.rows[0]){
            res.data.rows[0].serviceRegionInfo = JSON.parse(res.data.rows[0].serviceRegionInfo)
            res.data.rows[0].serviceRegionInfo = [ res.data.rows[0].serviceRegionInfo[0].provinceCode , res.data.rows[0].serviceRegionInfo[0].cityCode , res.data.rows[0].serviceRegionInfo[0].areaCode]
            this.regionChange(res.data.rows[0].serviceRegionInfo)
            this.reviewForm = res.data.rows[0]
            this.reviewForm.serviceRegion = res.data.rows[0].serviceRegionInfo
            this.reviewVisible = true
           }else{
             this.reviewForm = {}
           }
           this.reviewForm.appAuthToken = v.appAuthToken
           this.reviewForm.appVersion = v.appVersion
           this.reviewForm.appName = v.name
           this.reviewVisible = true
           this.$nextTick(()=>{
              this.$refs.reviewForm.clearValidate()
            })
        },
        // 上架 
        async shelvesMin(v){
          const confirm = await  this.$confirm('当前是否确认上架?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        if(confirm){
            const res = await upDownOnline({app_version:v.appVersion,app_name:v.name})
            if(res.result_code == "SUCCESS"){
                this.$message.success('上架成功！')
                this.initGetUploadInfo()
             }else{
                this.$message.error(res.return_msg)
             }
        }
        },
        // 下架
        async offtheMin(v){
          const confirm = await  this.$confirm('当前是否确认下架?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        if(confirm){
            const res = await upDownOffline({app_version:v.appVersion,app_name:v.name})
            if(res.result_code == "SUCCESS"){
                this.$message.success('下架成功！')
                this.initGetUploadInfo()
             }else{
                this.$message.error(res.return_msg)
             }
            }
        },
        regionChange(v){
            this.reviewForm.serviceRegionInfo = {}
            this.reviewForm.serviceRegionInfo.provinceCode = v[0]
            this.reviewForm.serviceRegionInfo.cityCode = v[1]
            this.reviewForm.serviceRegionInfo.areaCode = v[2]
        },
        async reviewClick(){
           const valid  = await this.$refs.reviewForm.validate()
           if(valid){
            // this.reviewForm.speed_up = true
               this.reviewLoading = true
               const res =  await reviewApply(this.reviewForm)  
             if(res.result_code == "SUCCESS"){
                this.reviewVisible = false
                this.$message.success('提交审核成功！');
                this.reviewLoading = false
                this.$nextTick(()=>{
                  this.initGetUploadInfo()
                })
             }else{
                this.$message.error(res.return_msg);
                this.reviewLoading = false

             }
           }
        },
        async addConstructClick(){
          const valid = await  this.$refs.ruleForm.validate()
          if(valid){
            this.constructLoading = true
           const res = await  constructUpload(this.constructForm)
           console.log(res)
           if(res.code == '201' || res.code == 500){
            this.constructLoading = false
            this.$message.error(res.msg || res.message)
           }else{
            this.constructLoading = false
            this.constructForm = {}
            this.$refs.ruleForm.clearValidate()
            this.$message.success('构建成功！');
            this.constructVisible = false
            this.initGetUploadInfo()
           }
          }
        },
        async detailVersion(v){

        },
        handleCurrentChange(val) {
          this.listParsem.page = val;
          this.initGetUploadInfo()
      },
      sizechange(val) {
          this.listParsem.size = val;
          this.initGetUploadInfo()
      },
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
          if (rowIndex === 0) {
            return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
          }
       }
    }
}
</script>

<style scoped>
.center{
    width: 100%;
    height: calc(100% - 30px);
    background-color: #fff;
    padding-top: 30px;
}
.center-form{
  padding: 0 22px;
}
.center-construct{
    width: 100%;
    display: flex;
    justify-content: end;
    margin-bottom: 30px;
}
.center-table{
    margin-top: 30px;
    padding: 0 20px;
}
.construct-dialog{
    height: 60vh;
    overflow-y: auto;
}
::v-deep .el-upload--text{
    width: 160px;
    height: 160px;
    line-height: 160px;
}
.video{
  width: 160px;
    height: 160px;
}
/* 针对 Firefox */
.construct-dialog {
  scrollbar-width: none; /* Firefox */
}
 
/* 针对 Chrome, Edge 和 Safari */
.construct-dialog::-webkit-scrollbar {
  width: 0; /* Chrome, Edge 和 Safari */
}
 
/* 针对 IE 10+ */
.construct-dialog {
  -ms-overflow-style: none;  /* IE 10+ */
}
 
/* 针对 IE 11 */
.construct-dialog {
  overflow: auto;
}
.avatar{
  width: 160px;
  height: 160px;
}
</style>